<div class="cx-page">
  <header class="cx-page__header">
    <h1 class="cx-page__title">Register</h1>
  </header>
  <section class="cx-page__section container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="cx-section">
          <h1 class="cx-section__title">Create an account</h1>
          <form [formGroup]="userRegistrationForm">
            <div class="form-group">
              <label>
                <span class="label-content">Title</span>
                <select formControlName="titleCode" class="form-control">
                  <option selected disabled>Select Title</option>
                  <option
                    *ngFor="let title of (titles$ | async)"
                    [value]="title.code"
                    >{{ title.name }}</option
                  >
                </select>
              </label>
            </div>

            <div class="form-group">
              <label>
                <span class="label-content">First name</span>
                <input
                  class="form-control"
                  type="text"
                  name="firstname"
                  placeholder="First Name"
                  formControlName="firstName"
                />
              </label>
            </div>

            <div class="form-group">
              <label>
                <span class="label-content">Last name</span>
                <input
                  class="form-control"
                  type="text"
                  name="lastname"
                  placeholder="Last Name"
                  formControlName="lastName"
                />
              </label>
            </div>

            <div class="form-group">
              <label>
                <span class="label-content">Email address</span>
                <input
                  class="form-control"
                  [class.is-invalid]="
                    (userRegistrationForm.get('email').errors?.email ||
                      userRegistrationForm.get('email').errors?.InvalidEmail) &&
                    userRegistrationForm.get('email').dirty
                  "
                  type="email"
                  name="email"
                  placeholder="Email Address"
                  formControlName="email"
                />
              </label>
            </div>

            <div class="form-group">
              <label>
                <span class="label-content">Password</span>
                <input
                  class="form-control"
                  [class.is-invalid]="
                    userRegistrationForm.get('password').invalid &&
                    userRegistrationForm.get('password').dirty
                  "
                  type="password"
                  name="password"
                  placeholder="Password"
                  formControlName="password"
                />
                <div
                  class="invalid-feedback"
                  *ngIf="
                    userRegistrationForm.get('password').invalid &&
                    userRegistrationForm.get('password').dirty
                  "
                >
                  <span
                    >Password must be six characters minimum, with one uppercase
                    letter, one number, one symbol</span
                  >
                </div>
              </label>
            </div>

            <div class="form-group">
              <label>
                <span class="label-content">Confirm password</span>
                <input
                  class="form-control"
                  [class.is-invalid]="
                    userRegistrationForm.get('password').value !==
                    userRegistrationForm.get('passwordconf').value
                  "
                  type="password"
                  name="confirmpassword"
                  placeholder="Confirm Password"
                  formControlName="passwordconf"
                />
                <div
                  class="invalid-feedback"
                  *ngIf="
                    userRegistrationForm.get('password').value !==
                      userRegistrationForm.get('passwordconf').value &&
                    userRegistrationForm.get('passwordconf').value
                  "
                >
                  <span>Both password must match</span>
                </div>
              </label>
            </div>

            <div class="form-group">
              <div class="form-check">
                <label>
                  <input
                    type="checkbox"
                    name="newsletter"
                    class="form-check-input"
                    formControlName="newsletter"
                  />
                  <span class="form-check-label">
                    Use my personal data to receive e-mail newsletters for
                    marketing campaigns. To change your settings, go to Consent
                    Management in My Account.
                  </span>
                </label>
              </div>
            </div>

            <div class="form-group">
              <div class="form-check">
                <label>
                  <input
                    type="checkbox"
                    name="termsandconditions"
                    formControlName="termsandconditions"
                  />
                  <span class="form-check-label">
                    I am confirming that I have read and agreed with the
                    <a
                      [routerLink]="
                        { route: ['termsAndConditions'] } | cxTranslateUrl
                      "
                      target="_blank"
                    >
                      Terms & Conditions
                    </a>
                  </span>
                </label>
              </div>
            </div>
            <button
              type="submit"
              (click)="submit()"
              [disabled]="userRegistrationForm.invalid"
              class="btn btn-block btn-primary"
            >
              Register
            </button>
            <a
              class="cx-login-link btn-link"
              [routerLink]="{ route: ['login'] } | cxTranslateUrl"
              >I already have an account. Sign In</a
            >
          </form>
        </div>
      </div>
    </div>
  </section>
</div>
